<template>
  <div class="my-designer-tree">
    <div class="tree-top">
      <div><i class=""></i>图层</div>
      <div><span class="iconfont icon-left cp" @click="handleChangeTree"></span></div>
    </div>
    <div class="tree-toolbar">
      <span class="iconfont icon-shangyi cp" title="上移一层" :style="enableBtnStyle" @click="handleMoveUp"></span>
      <span class="iconfont icon-xiayi cp" title="下移一层" :style="enableBtnStyle" @click="handleMoveDown"></span>
      <span class="iconfont icon-shangyi1 cp" title="置顶" :style="enableBtnStyle" @click="handleMoveTop"></span>
      <span class="iconfont icon-xiayi1 cp" title="置底" :style="enableBtnStyle" @click="handleMoveBottom"></span>
    </div>
    <div class="tree-wrap">
      <div title="日期选择器" class="layer-manager-item thumbnail-wrap" v-for="(comp,index) in comps"
           :title="comp.alias"
           :class="[{
              hidden: comp.hidden,
              locked: comp.locked,
              hovered: comp.hovered,
              selected: comp.selected
            }]"
           @mousedown="handleSelectComp(comp.id)"
           @mouseenter="comp.hovered = true"
           @mouseleave="comp.hovered = false"
           @contextmenu="handleShowMenu">
        <div class="layer-item-thumbnail" :alt="comp.img"
             :style="{backgroundImage: `url(${comp.img})`}"></div>
        <div class="layer-manager-thumbnail">
          <span v-if="editNameFlag && (comp.id === selectComp.id)">
            <el-input class="treeEditInput" v-model.trim="compNameModel" placeholder="" size="small"
                      @keydown.enter="$event.target.blur()"
                      @blur="handleEditName"></el-input>
          </span>
          <span class="layer-item-span" v-else>
            {{ comp.name }}
          </span>
        </div>
        <div class="layer-thumbail-item">
          <i
              v-if="comp.locked"
              class="iconfont icon-suo"
              @click="comp.locked = false"
          ></i>
          <i
              v-if="comp.hidden"
              class="iconfont icon-biyan"
              @click="comp.hidden = false"
          ></i>
        </div>
      </div>
      <div class="last-flex-item" @click="handleSelectComp('')"></div>
    </div>
    <div class="tree-toolbar">
      <span class="iconfont icon-suo" @click="handleLockComp"
            :class="enableLockBtnClass"
            title="锁定"
            :style="enableBtnStyle"></span>
      <span class="iconfont icon-shanchu1" @click="handleDelComp"
            title="删除"
            :style="enableBtnStyle"></span>
      <span class="iconfont icon-biyan" @click="handleHiddenComp"
            title="隐藏"
            :class="enableHiddenBtnClass"
            :style="enableBtnStyle"></span>
    </div>
    <context-menu :menuTop="menuTop" :menuLeft="menuLeft"
                  :menuShow="menuShow"
                  @hideMenu="hideMenu"
                  @editName="editName"></context-menu>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from "vue";
import { useStore } from "vuex";
import ContextMenu from "../../../components/functional/context-menu/context-menu.vue";
import { off, on } from "../../../utils/event";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  name: "design-tree",
  components: { ContextMenu, },
  setup() {
    const store = useStore();
    const hoverIndex = ref(-1);
    const menuTop = ref(0);
    const menuLeft = ref(0);
    const menuShow = ref(false);
    const selectComp = computed(() => store.getters["design/selectedComp"]);
    const handleChangeTree = () => {
      store.commit("design/SET_SelectedTree");
    };
    const comps = computed(() => [...store.state.design.components].reverse());
    const handleSelectComp = (id) => {
      if (!id) {
        menuShow.value = false;
      }
      store.commit("design/selectComp", id);
    };
    const handleShowMenu = (e) => {
      e.stopPropagation();
      e.preventDefault();
      // 计算菜单相对于编辑器的位移
      let top = e.clientY - 30;
      let left = e.clientX;
      menuLeft.value = left;
      menuTop.value = top;
      menuShow.value = true;
      on(document, "click", hideMenu);
    };
    const handleDelComp = () => {
      ElMessageBox.confirm(
          `你确定删除当前组件？`,
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        store.commit("design/DELETE_COMP", selectComp.value);
      });
    };
    const handleLockComp = () => {
      if (selectComp.value) {
        selectComp.value.locked = !selectComp.value.locked;
      }
    };
    const handleHiddenComp = () => {
      if (selectComp.value) {
        selectComp.value.hidden = !selectComp.value.hidden;
      }
    };
    const enableBtnStyle = computed(() => {
      return {
        opacity: selectComp.value ? 1 : 0.3,
      };
    });
    const enableLockBtnClass = computed(() => {
      return {
        hovered: selectComp.value ? (!!selectComp.value.locked ? true : false) : false
      };
    });

    const enableHiddenBtnClass = computed(() => {
      return {
        hovered: selectComp.value ? (!!selectComp.value.hidden ? true : false) : false
      };
    });
    const handleMoveUp = () => {
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "up" });
      }
    };

    const handleMoveDown = () => {
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "down" });
      }
    };

    const handleMoveBottom = () => {
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "bottom" });
      }
    };

    const handleMoveTop = () => {
      if (selectComp.value) {
        store.commit("design/moveComp", { id: selectComp.value.id, moveType: "top" });
      }
    };
    const hideMenu = () => {
      off(document, "click", hideMenu);
      menuShow.value = false;
    };
    const editNameFlag = ref(false);
    const compNameModel = ref("");
    const editName = () => {
      if (selectComp.value) {
        editNameFlag.value = true;
        compNameModel.value = selectComp.value.name;
      }
    };
    const handleEditName = () => {
      if (compNameModel.value) {
        selectComp.value.name = compNameModel.value;
      }
      editNameFlag.value = false;
    };
    onMounted(() => {
    });
    return {
      hoverIndex,
      comps,
      selectComp,
      editNameFlag,
      compNameModel,
      handleEditName,
      editName,
      handleChangeTree,
      handleDelComp,
      handleSelectComp,
      handleShowMenu,
      handleHiddenComp,
      handleLockComp,
      enableBtnStyle,
      enableLockBtnClass,
      enableHiddenBtnClass,
      handleMoveBottom,
      handleMoveUp,
      handleMoveDown,
      handleMoveTop,
      menuTop,
      menuLeft,
      menuShow,
      hideMenu
    };
  }
});
</script>
<style scoped lang="less">
@import "./../../../style/page/design.less";
</style>
